<template>
	<div class="common-layout">
		<el-container>
			<el-aside :width="leftwidth">
				<el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
					@close="handleClose" unique-opened="true">
					<div class="logoandname">
						<span>后台管理系统</span>
					</div>
					<!-- <el-sub-menu index="0" @click="router.replace({ path: '/index' })"> -->
					<el-sub-menu index="0">
						<template #title >
							<el-icon><House /></el-icon>
							<span>首页</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="0-1" @click="router.replace({ path: '/index' })">数据展示</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="1">
						<template #title>
							<el-icon><User /></el-icon>
							<span>用户管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="router.replace({ path: '/userlist' })">用户列表</el-menu-item>
							<el-menu-item index="1-1" @click="router.replace({ path: '/admin' })">添加管理员</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="2">
						<template #title>
							<el-icon><Suitcase /></el-icon>
							<span>商品管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="2-1" @click="router.replace({ path: '/addlist' })">商品列表</el-menu-item>
							<el-menu-item index="2-2" @click="router.replace({ path: '/goods' })">添加商品</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title>
							<el-icon><EditPen /></el-icon>
							<span>新闻公告</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="3-1" @click="router.replace({ path: '/Journalism' })">公告</el-menu-item>
							<el-menu-item index="3-2" @click="router.replace({ path: '/Notice' })">新闻</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<el-button plain @click="showwidth" :icon="smolllogo"></el-button>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {EditPen,House,User,Suitcase,DArrowLeft,DArrowRight} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const router = useRouter();
const isCollapse = ref(false)
const leftwidth = ref("200px")
const smolllogo = ref(DArrowRight)
const showwidth = () => {
	isCollapse.value = !isCollapse.value
	if (isCollapse.value == true) {
		leftwidth.value = "64px"
		smolllogo.value = DArrowRight
	} else {
		smolllogo.value = DArrowLeft
		leftwidth.value = "200px"
	}
	console.log(isCollapse.value);

}
onMounted(() => {

})
const handleOpen = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.logoandname {
	text-align: center;
	height: 70px;
	line-height: 70px;
	font-size: 24px;
	span {
		height: 80px;
		display: inline-block;
		overflow: hidden;
		font-size: 26px;
		background: linear-gradient(270deg, #3f5efb, #fc466b);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.el-aside {
	height: 100vh;
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
}

.el-header {
	min-width: 600px;
	.el-button {
		margin-top: 20px;
	}
}

.el-main {
	min-width: 600px;
	padding: 0;
}
</style>
